<template>
  <div class="specialSubject">
    <div
      class="subject"
      v-for="item in data"
      :key="item.id"
      @click="$router.push(`/topic/${item.content_id}`)"
    >
      <!-- 动态路由传参 -->
      <div class="subImg">
        <img :src="item.cover" alt="" />
        <span>#专题</span>
      </div>
      <div class="subTitle">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
import { getspecial } from "@/api/find";
export default {
  name: "specialSubject",
  data() {
    return {
      data: [],
    };
  },
  created() {
    this.getspecialData();
  },
  methods: {
    async getspecialData() {
      const { data } = await getspecial();
      this.data = data;
      console.log("专题的数据", this.data);
    },
  },
};
</script>

<style lang="less" scoped>
.specialSubject {
  width: 375px;
  padding: 0px 15px 0 15px;
  .subject {
    width: 100%;
    height: 240px;
    background: rgb(218, 218, 218);
    border-radius: 5px;
    margin-bottom: 40px;
    box-sizing: border-box;
    .subImg {
      position: relative;

      img {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        width: 100%;
      }
      span {
        position: absolute;
        bottom: 5%;
        left: 5%;
        color: rgb(104, 101, 101);
      }
    }
    .subTitle {
      color: #000;
      padding: 5px;
    }
  }
}
</style>